<template>
  <div>
    <ul class="mui-table-view mui-table-view-chevron">
      <li class="mui-table-view-cell mui-media" v-for="(item,index) in newslist" :key="item.path">
        <router-link class="mui-navigate-right" :to="'/home/newsinfo/'+index">
          <img class="mui-media-object mui-pull-left" :src="item.news_img">
          <div class="mui-media-body">
            <div>
              <span v-text="item.news_title"></span>
              <p class="mui-ellipsis">{{item.news_time|dateFormat('YYYY-MM-DD')}}</p>
            </div>
            <div>
              <p class="mui-ellipsis" v-text="item.news_content"></p>
              <p class="mui-ellipsis">阅读：{{index}}</p>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
    <!-- <Comment></Comment> -->
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import Comment from "./../subcomponents/Comment.vue";

export default {
  components: {
    Comment
  },
  data() {
    return { newslist: null };
  },
  methods: {
    getNewsList() {
      this.$http.get("/src/data/newslist.json").then(res => {
        console.log(res);
        if (res.ok) {
          this.newslist = res.body.news;
          console.log(newslist);
          Toast("ok");
        } else {
          this.$alert("请求失败");
        }
      });
    }
  },
  created() {
    this.getNewsList();
  }
};
</script>

<style lang="scss" scoped>
.mui-media-body div {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
</style>
